<template>
  <el-form ref="form" :model="form" label-width="80px" :rules="rules" class="addForm">
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="库存数量" prop="stock">
      <el-input v-model.number="form.stock" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品种类" prop="categoryId">
      <el-select v-model="form.categoryId" placeholder="请选择商品种类">
        <el-option v-for="item in optionItem" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="销售状态" prop="status">
      <el-select v-model="form.status" placeholder="请选择销售状态">
        <el-option label="待售" value="1"></el-option>
        <el-option label="上架" value="2"></el-option>
        <el-option label="下架" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否热销" prop="isHot">
      <el-select v-model="form.isHot" placeholder="请选择是否热销">
        <el-option label="是" value="1"></el-option>
        <el-option label="否" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="详细信息" prop="detail">
      <el-input type="textarea" v-model="form.detail"></el-input>
    </el-form-item>
    <el-form-item label="商品单价" prop="price">
      <el-input v-model="form.price"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即添加</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CommodityAdd",
  data() {
    return {
      form: {
        name: '',
        categoryId: '',
        stock: '',
        status: '',
        detail: '',
        isHot:'',
        price:''
      },
      rules:{
        name: [
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '库存不能为空'},
          { type: 'number', message: '库存必须为数字值'}
        ],
        status:[
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        detail:[
          { required: true, message: '请输入商品简介', trigger: 'blur' }
        ],
        isHot:[
          { required: true, message: '请输入商品简介', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '单价不能为空'},
          // { type: 'number', message: '单价必须为数字值'}
        ]
      },
      optionItem:[]
    }
  },
  methods: {
    onSubmit(formName){
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          axios.post('http://localhost:8181/product/addProduct',this.form).then(function (resp){
            if(resp.data=='1'){
              _this.$message({
                message: '商品添加成功',
                type: 'success'
              });
            }else{
              _this.$message({
                message: '商品添加失败',
                type: 'warning'
              });
            }
          })
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getOptionItem(){
      const _this=this;
      axios.get('http://localhost:8181/product/findAllCategories').then(function (resp){
        _this.optionItem=resp.data.data;
      })
    }
  },created() {
    this.getOptionItem();
  }
}
</script>

<style scoped>

</style>